<!DOCTYPE html>
<html lang="en" class="bg-white" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>合同录入</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{../assets/libs/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=311"/>
    <link rel="stylesheet" href="../assets/module/city-picker/city-picker.css"/>
    <script src="../assets/module/city-picker/city-picker.data.js"></script>
    <style>
        .layui-form-item {
            margin-bottom: 0;
            margin-top: 20px;
        }

        .layui-form-item .layui-inline {
            margin-bottom: 25px;
            margin-right: 0;
        }
    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">合同基本信息</li>
            <li lay-id="2">合同照上传</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <div class="layui-card">
                <div class="layui-card-body">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>个人信息</legend>
                    </fieldset>
                    <form class="layui-form layui-form-pane" lay-filter="test1">
                        <div class="layui-form-item layui-row">
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">姓 名:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_name" type="text" placeholder="请输入加盟商姓名" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">联系电话:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_phone" type="text" placeholder="请输入联系电话" class="layui-input" />
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">性别:</label>
                                <div class="layui-input-block">
                                    <select name="sys_cs_sex" lay-verify="required">
                                        <option value="">请选择性别</option>
                                        <option value="0">男</option>
                                        <option value="1">女</option>
                                    </select>
                                </div>
                            </div>
                         <!--   <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">个人邮箱:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_email" lay-verify="required|email"  type="text" placeholder="请输入联系邮箱" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">所属公司:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_company" type="text"  placeholder="请输入公司名称" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">执照编号:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_zipcode" lay-verify="number" type="text" placeholder="请输入加盟商执照编号" class="layui-input"/>
                                </div>
                            </div>-->
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">身份证号:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_idcard" lay-verify="required|identity" type="text" placeholder="请输入加盟商身份证号" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md8">
                                <label class="layui-form-label">详细地址:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_address"  type="text" placeholder="请输入加盟商详细地址" class="layui-input"/>
                                </div>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>合同信息</legend>
                            </fieldset>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">合同编号:</label>
                                <div class="layui-input-block">
                                    <input id="sys_cs_id" lay-verify="required|number"  name="sys_cs_id"  type="text" placeholder="请输入合同编号" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">合同类型:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_type" type="text"  placeholder="请输入合同类型" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">项目类型:</label>
                                <div class="layui-input-block">
                                    <select name="sys_cs_project" id="sys_cs_project" >
                                        <option value="">请选择项目</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">加盟区域:</label>
                                <div class="layui-input-block mr0">
                                    <input name="sys_cs_region" id="edtCity" class="layui-input" type="text" lay-verify="required" placeholder="选择加盟区域"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md8">
                                <label class="layui-form-label">办公地址:</label>
                                <div class="layui-input-block">
                                    <input name="sys_company_address" type="text" placeholder="请输入办公地址" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">代理备注:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_remarks"  type="text" placeholder="请输入代理备注" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">应收账款:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_num"  type="text" placeholder="单位元" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">已收账款:</label>
                                <div class="layui-input-block">
                                    <input name="sys_cs_money"  type="text" placeholder="单位元" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">生效时间:</label>
                                <div class="layui-input-block">
                                    <input id="dateRange02" lay-verify="required" name="sys_create_time" type="text" placeholder="请选择合同生效时间"
                                           class="layui-input date-icon"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4">
                                <label class="layui-form-label">到期时间:</label>
                                <div class="layui-input-block">
                                    <input id="dateRange03" lay-verify="required" name="sys_over_time"  type="text" placeholder="请选择合同到期时间"
                                           class="layui-input date-icon"/>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-md4" style="text-align: center">
                                <button class="layui-btn" lay-filter="formDemo" lay-submit>&emsp;提交&emsp;</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-form layui-form-pane">
                            <div class="layui-form-item">
                                <label class="layui-form-label">合同编号</label>
                                <div class="layui-input-block">
                                    <input id="sys_ct_num" type="text" placeholder="请输入合同编号" class="layui-input" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <fieldset class="layui-elem-field">
                            <legend>上传合同文件</legend>
                            <div class="layui-field-box">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="imageBtn">上 传</button>
                                        <div class="layui-upload-list layui-row layui-col-space10" id="demo2">
                                        </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- js部分 -->

<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=311"></script>

<script>
    layui.use(['layer', 'form','citypicker', 'upload', 'element', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;
        var element = layui.element;
        var laydate = layui.laydate;
        var cityPicker = layui.citypicker;
        var cp = new cityPicker("#edtCity");
        cp.setValue("");
        function getCity(){
            var  str=cp.getVal();
            if (str.indexOf("/")!=-1) {
                var arr = str.split("/");
                var res = "";
                for (var i = 0; i < arr.length; i++) {
                    res = res + arr[i];
                }
                return res;
            }else {
                return "";
            }
        }
        laydate.render({
            elem: '#dateRange02',
            format:'yyyy-MM-dd HH:mm:ss'
        });
        laydate.render({
            elem: '#dateRange03',
            format:'yyyy-MM-dd HH:mm:ss'
        });
        function isNull(str){
            if (str==null || str=="") {
                return 0;
            }else {
                return parseInt(str);
            }
        }
        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            /*
            *      sys_company_address:data.field.sys_company_address,
                        sys_cs_zipcode:data.field.sys_cs_zipcode,
                        sys_cs_email:data.field.sys_cs_email,*/
            layer.confirm('请确认合同信息是否有误', {
                btn: ['无误','好的'] //按钮
            }, function(){
                $.ajax({
                    type: "POST",
                    url: "/sys/franchisee/addFranchisee",
                    data: {
                        sys_cs_id:isNull(data.field.sys_cs_id),
                        sys_cs_name:data.field.sys_cs_name,
                        sys_cs_phone:data.field.sys_cs_phone,
                        sys_cs_type:data.field.sys_cs_type,
                        sys_company_address:data.field.sys_company_address,
                        sys_cs_num:data.field.sys_cs_num,
                        sys_cs_money:data.field.sys_cs_money,
                        sys_cs_project:isNull(data.field.sys_cs_project),
                        sys_cs_license:data.field.sys_cs_license,
                        sys_cs_idcard:data.field.sys_cs_idcard,
                        sys_cs_region:cp.getVal(),
                        sys_cs_address:data.field.sys_cs_address,
                        sys_cs_sex:parseInt(data.field.sys_cs_sex),
                        sys_cs_remarks:data.field.sys_cs_remarks,
                        sys_create_time:data.field.sys_create_time,
                        sys_over_time:data.field.sys_over_time
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.code==0){
                            layer.msg("信息提交成功",{icon:1})
                            setTimeout(function () {
                                // layer.closeAll();
                                layer.msg("请上传合同扫描件",{icon:1})
                                element.tabChange('docDemoTabBrief', '2');
                                //  window.location.reload();
                            },1500)
                        }
                    }
                });
            },function(){
                layer.msg("已取消提交",{icon:1})
            });
            return false;
        });
        var str=localStorage.getItem("projects");
        var arr1=str.split(",");
        for (var i=1;i<arr1.length;i++){
            $("#sys_cs_project").append(' <option value="'+i+'">'+arr1[i]+'</option>')
        }
        form.render('select', 'test1');
        upload.render({
            elem: '#imageBtn'
            ,url: '/file/fileUploads'
            ,multiple: true
            ,data: {
                sys_cs_num: function(){
                    return parseInt($("#sys_ct_num").val());
                }
            }
            ,before: function(obj){
              /*  obj.preview(function(index, file, result){
                    $('#demo2').append('<div class="layui-col-sm3"><img style="width: 300px;height: 240px" src="'+ result +'" alt="\'+ file.name +\'" class="layui-upload-img"></div>')
                });*/
            }
            ,done: function(res){
                var image="/upload/"+parseInt($("#sys_ct_num").val())+"/"+res.data;
                if (res.code==0){
                    $('#demo2').append('<div class="layui-col-sm3"><img style="width: 300px;height: 240px" src="'+ image +'"  class="layui-upload-img"></div>')
                    layer.msg("上传成功！",{icon:6})
                }
            }
        });
        $("#sys_cs_id").focusout(function() {
            var name = $("#sys_cs_id").val();
            if(name != null && name != ''){
                checkName(parseInt(name));
            }
        });
//发ajax请求到后台判断用户名是否重复
        function checkName(name){
            $.ajax({
                url : "/sys/franchisee/getFranchiseeById",
                type : "post",
                dataType : 'JSON',
                data : {sys_ct_num:name},
                success : function(res) {
                   if (res.code==-1) {
                       layer.msg("合同编号可用",{icon:1})
                   }
                   if (res.code==0){
                       layer.confirm('该合同编号已存在', {
                           btn: ['确定'] //按钮
                       }, function(){
                           layer.msg("请重新输入",{icon:5})
                       });
                   }
                }
            });
        }
    });
</script>
</body>

</html>